<div class="layui-form-item">
    <label class="layui-form-label {$form['extra_class']}">
        {if condition="is_int(strpos($form['extra_attr'], 'required'))"}
        <span class="text-danger">*</span>
        {/if}
        {$form['title']}
    </label>
    <div class="layui-input-block">
        <input style="display: inline-block;width: 75%;"
                placeholder="{$form['tip'] ?? ''}"
                type="text"
                value="{$form['value']['server_url'] ?? ''}"
                id="{$form['name']}_server_url"
                name="{$form['name']}_server_url"
                class="layui-input"
                {$form['extra_attr']}
                readonly
        ／>
        <input type="hidden" id="{$form['name']}_media_id"
               name="{$form['name']}_media_id"
               value="{$form['value']['media_id'] ?? ''}">
        <div class="layui-btn-group" style="margin-left: -5px;margin-top: -3px;">
            <a href="javascript:;" class="layui-btn layui-btn-primary" id="picker-{$form['name']}">选择音频</a>
            <a href="javascript:;" class="layui-btn <?=empty($form['value']) ? 'hide' : '';?>" id="preview-{$form.name}" style="border-left: none;">预览</a>
        </div>
    </div>

    <script>
        layui.use(['layer', 'jquery'], function () {
            var layer = layui.layer,
                    $ = layui.jquery;
            //点击预览
            $("#preview-{$form['name']}").on('click', function () {
                var url = $("#{$form['name']}_server_url").val();
                window.open(url);
            });
            //点击选择图片
            $("#picker-{$form['name']}").on('click', function () {
                layer.open({
                    type: 2,
                    title: '选择音频',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['90%', '90%'],
                    content: ['{:url("mpmaterial/choose", ["type" => "voice", "field" => $form["name"]])}', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            });
        });

        //根据iframe传回的值进行当前页面的赋值
        function setVoiceValue (value, field) {
            $("#"+field+'_server_url').val(value[0].url);
            $("#"+field+'_media_id').val(value[0].media_id);
            $("#preview-"+field).removeClass("hide");
        }
    </script>
</div>